<template>
  <div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="选择商品:" prop="name">
          <!-- 点击选择商品 -->
          <div class="addimage">
            <i class="el-icon-plus" @click="innerVisible = true"></i>
            <el-dialog
              width="40%"
              title="商品列表"
              :visible.sync="innerVisible"
              append-to-body
            >
              <el-input
                v-model="input"
                size="mini"
                style="width: 200px"
                placeholder="请输入内容"
              ></el-input>
              <el-select
                v-model="value"
                size="mini"
                style="width: 130px"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-button
                type="primary"
                size="mini"
                class="select"
                icon="el-icon-search"
                >搜索</el-button
              >
              <el-table
                :data="selecltgoodsList"
                size="small"
                style="width: 100%"
              >
                <el-table-column prop="id" label="商品id"> </el-table-column>
                <el-table-column label="商品图片">
                  <template slot-scope="scope">
                    <a
                      :href="scope.row.image"
                      style="color: #42b983"
                      target="_blank"
                      ><img
                        :src="scope.row.image"
                        alt="点击打开"
                        class="tableImage"
                    /></a>
                  </template>
                </el-table-column>
                <el-table-column prop="storeName" label="商品名称">
                </el-table-column>
                <el-table-column prop="storeCategory.cateName" label="分类名称">
                </el-table-column>
                <el-table-column prop="price" label="商品价格">
                </el-table-column>
                <el-table-column
                  label="操作"
                  fixed="right"
                  width="150px"
                  align="center"
                >
                  <el-button
                    type="primary"
                    size="mini"
                    icon="el-icon-edit"
                    @click="selectFn(row)"
                    >选择</el-button
                  >
                </el-table-column>
              </el-table>
              <div>
                <el-pagination
                  class="pagination"
                  v-if="ispagination"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentpage"
                  :page-sizes="pagesizes"
                  :page-size="pagesize"
                  layout="total,prev, pager, next, sizes"
                  :total="total"
                >
                </el-pagination>
              </div>


            </el-dialog>
          </div>
        </el-form-item>

        <el-form-item label="拼团名称:" size="mini" prop="region">
          <el-input
            style="width: 500px"
            placeholder="请输入拼团名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="拼团简介:" required>
          <el-input
            style="width: 500px"
            size="mini"
            placeholder="请输入拼团简介"
          ></el-input>
        </el-form-item>

        <el-form-item label="单位:" prop="delivery">
          <el-input
            style="width: 500px"
            size="mini"
            placeholder="请输入单位"
          ></el-input>
        </el-form-item>

        <el-form-item label="商品原价:" prop="delivery">
          <el-input
            placeholder="0"
            v-model="input"
            size="mini"
            :disabled="true"
          >
          </el-input>
        </el-form-item>

        <div class="block">
          <span class="demonstration">拼团开始时间:</span>
          <el-date-picker
            size="mini"
            v-model="value1"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </div>

        <div class="blocks">
          <span class="demonstration">拼团结束时间:</span>
          <el-date-picker
            size="mini"
            v-model="value1"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </div>

        <el-form-item label="活动状态:" prop="delivery">
          <el-radio v-model="radio" label="1">备选项</el-radio>
          <el-radio v-model="radio" label="2">备选项</el-radio>
        </el-form-item>
          <!-- 产品主图 -->
        <el-form-item label="产品主图:" prop="name">
          <div class="addimage">
            <i class="el-icon-plus"></i>
          </div>
        </el-form-item>
         <!-- 产品轮播图 -->
          <el-form-item label="产品轮播图:" prop="name">
          <div class="addimage">
            <i class="el-icon-plus"></i>
          </div>
        </el-form-item>

          <el-form-item label="拼团时效">
        <el-input-number v-model="form.effectiveTime" style="width: 500px;"  sizi='small'/>
      </el-form-item>
        <!-- 拼团人数 -->
          <el-form-item label="拼团人数">
        <el-input-number v-model="form.people" />
      </el-form-item>

  <el-form-item label="图片规格">
          <el-radio disabled >开启</el-radio>
        <el-radio disabled >关闭</el-radio>
        </el-form-item>

<el-form-item>
          <el-table
     
      style="width: 100%">

      <el-table-column
      label="图片"
       >
     
      
       </el-table-column>

      <el-table-column
      label="商品编号">
       <template >
          <div>
            
            <el-input prop='from.id' type="text"/>
           
          </div>
        </template>
      </el-table-column>

      <el-table-column
       
        label="售价">
         <template slot-scope=""> 
        <div>
          <el-button></el-button>
        </div>
      </template>
      </el-table-column>

      <el-table-column
        prop="address"
        label="成本价">
      </el-table-column>

      <el-table-column
        prop="address"
        label="原价">
      </el-table-column>

      <el-table-column
        prop="address"
        label="库存">
      </el-table-column>

      <el-table-column
        prop="address"
        label="秒杀价">
      </el-table-column>

      <el-table-column
        prop="address"
        label="秒杀库存">
      </el-table-column>

      <el-table-column
        prop="address"
        label="重量(KG)">
      </el-table-column>

      <el-table-column
        prop="address"
        label="体积(m³)">
      </el-table-column>

      <el-table-column
        prop="address"
        label="所需兑换积分">
      </el-table-column>

      <el-table-column
        prop="address"
        label="拼团价">
      </el-table-column>

      <el-table-column
        prop="address"
        label="拼团活动库存">
      </el-table-column>
      
      <el-table-column
        prop="address"
        label="秒杀价">
      </el-table-column>


      <el-table-column
        prop="address"
        label="秒杀活动库存">
      </el-table-column>

        <el-table-column
        prop="address"
        label="操作">
      </el-table-column>


    </el-table>



        </el-form-item>
       
         <el-form-item label="运费模板:">
           <el-select disabled v-model="value" placeholder="请选择">
    <el-option
      >
    </el-option>
  </el-select>
        </el-form-item>

       <el-form-item label="商品详情:">
      <MyEditor width="1000px" :content=form.content>
        </MyEditor>
    </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >立即创建</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {selecltimg,selecltgoods}  from '@/api/GroupProducts'
import MyEditor from '@/components/MyEditor.vue'
export default {
    components:{MyEditor},
  data() {
    
    return{
     radio:"",
     input:"",
     value:"1",
     value1:"",
     timenum:"1",
     innerVisible:false,
      selecltgoodsList:[],
      selectimageList:[],
       options:[
        {
          value:'11',
          label:1

        }
      ],
      form:{
        effectiveTime:'',
        people:'',
      },
      ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        rules:{} 
    }
  },
  mounted(){
    selecltgoods().then(res=>{
      console.log(res);
      let _self=this;
      _self.selecltgoodsList=res.content
      console.log(this.selecltgoodsList);
    })
  },
  methods:{
    handleClose() {
       this.$emit('closeAdd')
    },
     handleChange(value) {
        console.log(value);
      },
    
     selectFn(){
          selecltimg().then(res=>{
            console.log(res);
            let _self=this;
      _self.selectimageList=res
      console.log(this.selectimageList);
          })
     }
    
  },
  watch:{
    dialogVisible(newVal){
        this.dialogVisible = newVal
    }
  },
 
  props: {
    dialogVisible: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
  },
};
</script>